<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			.aa {
				position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            #bb > [class*=icon] {
	            width: 41px;
	            height: 69px;
	            position: absolute;
	            top: 50%;
	            transform: translate(0,-50%);
                width: 41px;
                height: 69px;
                line-height: 69px;
                cursor: pointer;
            }
            #bb{
            	width: 800px;
                height: 545px;
                background:url(img/xiaolin.png) ;
                
            }
            #bb > .ll-icon {
                background: url(img/icon-slides.png) 82px center;
                left: 10px;
            }

            #bb > .rr-icon {
                background: url(img/icon-slides.png) 41px center;
                right: 10px;
            }
            #bb > .ll-icon:hover {
                background-position: 0;
            }

            #bb > .rr-icon:hover {
                background-position: -42px center;
            }
            #bb > .dd {
            	padding: 10px;
            	position: absolute;
            	bottom: 20px; 
            	right: 370px;
            }
            #bb > .dd li {
            	float: left;
            	width: 10px;
            	height: 10px;
            	border-radius:50%;
            	border: 2px solid hsla(240,0%,100%,.6);
            	background-color: greenyellow;
            	opacity: 0.4;
            	margin: 0 4px;
            }
            #bb > .dd li.cc {
            	background: hsla(0,100%,0%,.4);
            	border-color: blue;
            	opacity: 0.4;
            }

		</style>
	</head>
	<body>
		<div>
			<div id="bb" class="aa">
				<div class="ll-icon"></div>
                <div class="rr-icon"></div>
                <ul class="dd">
                	<li class="cc"></li>
            	    <li></li>
            	    <li></li>
            	    <li></li>
            	    <li></li>
            	    <li></li>
                </ul>
		    </div>
		</div>
	</body>
</html>
